package com.example.composemodifiterdemo

import android.os.Bundle
import android.widget.ScrollView
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ChainStyle
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension

/**
 * @auth: njb
 * @date: 2023/1/17 16:36
 * @desc:
 */
class ConstraintLayoutActivity:ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
           // ConstraintLayoutContent()
            //ConstraintLayoutSample()
            //InputFieldLayoutDemo()
            GuidelineSample()
            //ChainDemo()
        }
    }

    @Composable
    fun ConstraintLayoutContent() {
        ConstraintLayout {
            // Create references for the composables to constrain
            val (button, text) = createRefs()
            Button(
                onClick = { /* Do something */ },
                // Assign reference "button" to the Button composable
                // and constrain it to the top of the ConstraintLayout
                modifier = Modifier.constrainAs(button) {
                    top.linkTo(parent.top, margin = 16.dp)
                }
            ) {
                Text("Button")
            }

            // Assign reference "text" to the Text composable
            // and constrain it to the bottom of the Button composable
            Text("Android", Modifier.constrainAs(text) {
                top.linkTo(button.bottom, margin = 16.dp)
            })
        }
    }

    @Preview
    @Composable
    fun  ConstraintLayoutSample(){
            ConstraintLayout(
                modifier = Modifier
                    .width(200.dp)
                    .height(200.dp)
                    .padding(10.dp)
            ) {
                // Create references for the composables to constrain
                val (button, text) = createRefs()
                Button(
                    onClick = { },
                    // Assign reference "button" to the Button composable
                    // and constrain it to the top of the ConstraintLayout
                    modifier = Modifier.constrainAs(button) {
                        top.linkTo(parent.top, margin = 6.dp)
                    }
                ) {
                    Text("Button")
                }

                // Assign reference "text" to the Text composable
                // and constrain it to the bottom of the Button composable
                Text("Android", Modifier.constrainAs(text) {
                    top.linkTo(button.bottom, margin = 6.dp)
                })
                val (portraitImageRef, usernameTextRef, desTextRef) = remember { createRefs() }
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(R.string.description),
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .constrainAs(portraitImageRef)
                        {
                            top.linkTo(parent.top)
                            bottom.linkTo(parent.bottom)
                        }
                        .size(200.dp))
                Text(text = "Compose 技术爱好者Compose 技术爱好者Compose 技术爱好者Compose 技术爱好者Compose 技术爱好者Compose",
                    fontSize = 24.sp,
                    maxLines = 1,
                    textAlign = TextAlign.Center,
                    overflow = TextOverflow.Ellipsis,//1行显示不下时是否显示。。。
                    modifier = Modifier.constrainAs(usernameTextRef) {
                        top.linkTo(portraitImageRef.top)
                        start.linkTo(portraitImageRef.end, 10.dp)
                        end.linkTo(parent.end, 10.dp)
                        width = Dimension.preferredWrapContent
                    })
                Text(text = "我的个人描述...",
                    fontSize = 14.sp,
                    color = Color.Red,
                    fontWeight = FontWeight.Light,
                    modifier = Modifier.constrainAs(desTextRef) {
                        top.linkTo(usernameTextRef.bottom, 5.dp)
                        start.linkTo(portraitImageRef.end, 10.dp)
                    }
                )
        }
    }

    @Preview
    @Composable
    fun GuidelineSample(){
            ConstraintLayout(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(10.dp)
                    .background(Color.White)
            ) {
                val topGuideline = createGuidelineFromTop(0.2f)
                var (userPortraitBackgroundRef, userPortraitImgRef, welcomeRef, quotesRef) = remember { createRefs() }
                Box(
                    modifier = Modifier
                        .background(Color.Green)
                        .constrainAs(userPortraitBackgroundRef) {
                            top.linkTo(parent.top)
                            bottom.linkTo(topGuideline)
                            height = Dimension.fillToConstraints
                            width = Dimension.matchParent
                        }
                )
                Image(
                    painter = painterResource(id = R.mipmap.avatar),
                    contentDescription = stringResource(R.string.description),
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .constrainAs(userPortraitImgRef)
                        {
                            top.linkTo(topGuideline)
                            bottom.linkTo(topGuideline)
                            start.linkTo(parent.start)
                            end.linkTo(parent.end)
                        }
                        .size(100.dp)
                        .clip(CircleShape)
                        .border(width = 2.dp, color = Color.Red, shape = CircleShape)
                )
                Text(text = "西数SN350/570/770/850/990/660/330/440/220/110/550/111/222",
                    fontSize = 14.sp,
                    maxLines = 1,//若文本内容太多1行显示不下行数设置为2
                    textAlign = TextAlign.Start,//
                    overflow = TextOverflow.Clip,//若1行显示不下时是否显示。。。使用TextOverflow.Ellipsis，若想多行显示TextOverflow.Clip
                    modifier = Modifier.constrainAs(welcomeRef) {
                        top.linkTo(userPortraitImgRef.bottom, 30.dp)
                        start.linkTo(parent.start)
                        end.linkTo(parent.end)
                        width = Dimension.preferredWrapContent
                    }
                )
            }
    }

    @Composable
    fun InputFieldLayoutDemo() {
        ConstraintLayout(
            modifier = Modifier
                .width(400.dp)
                .height(100.dp)
                .padding(10.dp)
        ) {
            val (usernameTextRef, passwordTextRef, usernameInputRef, passWordInputRef, dividerRef) = remember { createRefs() }
            var barrier = createEndBarrier(usernameTextRef, passwordTextRef)
            Text(
                text = "用户名",
                fontSize = 14.sp,
                textAlign = TextAlign.Left,
                modifier = Modifier
                    .constrainAs(usernameTextRef) {
                        top.linkTo(parent.top)
                        start.linkTo(parent.start)
                    }
            )
            Divider(
                Modifier
                    .fillMaxWidth()
                    .constrainAs(dividerRef) {
                        top.linkTo(usernameTextRef.bottom)
                        bottom.linkTo(passwordTextRef.top)
                    })
            Text(
                text = "密码",
                fontSize = 14.sp,
                modifier = Modifier
                    .constrainAs(passwordTextRef) {
                        top.linkTo(usernameTextRef.bottom, 19.dp)
                        start.linkTo(parent.start)
                    }
            )
            OutlinedTextField(
                value = "",
                onValueChange = {},
                modifier = Modifier.constrainAs(usernameInputRef) {
                    start.linkTo(barrier, 10.dp)
                    top.linkTo(usernameTextRef.top)
                    bottom.linkTo(usernameTextRef.bottom)
                    height = Dimension.fillToConstraints
                }
            )
            OutlinedTextField(
                value = "",
                onValueChange = {},
                modifier = Modifier.constrainAs(passWordInputRef) {
                    start.linkTo(barrier, 10.dp)
                    top.linkTo(passwordTextRef.top)
                    bottom.linkTo(passwordTextRef.bottom)
                    height = Dimension.fillToConstraints
                }
            )
        }
    }


    /**
     *  Chain链接约束,Compose提供了ChainStyle
     *  1.Spread:链条中美国元素均分整个parent空间
     *  2.SpreadInside:SpreadInside:链条中首尾元素紧贴边界，剩下每个元素平分整个parent空间。
     *  3.Packed:链条在所有元素聚焦到中间。
     */
    @Preview
    @Composable
    fun ChainDemo() {
        ConstraintLayout(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Gray)
        ) {
            val (quotesFirstLineRef, quotesSecondLineRef, quotesThirdLineRef, quotesForthLineRef) = remember { createRefs() }
            createVerticalChain(quotesFirstLineRef, quotesSecondLineRef, quotesThirdLineRef, quotesForthLineRef,
                chainStyle = ChainStyle.Packed)
            Text(
                text = "寄蜉蝣于天地，",
                color = Color.White,
                fontSize = 30.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier.constrainAs(quotesFirstLineRef) {
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
            )
            Text(
                text = "渺沧海之一粟。",
                color = Color.White,
                fontSize = 30.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier.constrainAs(quotesSecondLineRef) {
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
            )

            Text(
                text = "哀吾生之须臾，",
                color = Color.White,
                fontSize = 30.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier.constrainAs(quotesThirdLineRef) {
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
            )
            Text(
                text = "羡长江之无穷。",
                color = Color.White,
                fontSize = 30.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier.constrainAs(quotesForthLineRef) {
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
            )
        }
    }
}